
<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption">
    </quill-editor>
    <el-button type="text" @click="dialogVisible = true" style="padding-left: 700px">评分</el-button>
    <el-dialog
      title="评分"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="分数"
          prop="score"
          :rules="[
          { required: true, message: '分数不能为空'},
          { type: 'number', message: '分数必须为数字值'}
    ]"
        >
          <el-input type="score" v-model.number="numberValidateForm.score" autocomplete="off" maxlength="3" show-word-limit style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>


<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import axios from 'axios'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: `欢迎使用`,
      workId: 0,
      numberValidateForm: {
        score: ''
      },
      dialogVisible: false,
      editorOption: {},
      id: 0
    }
  },
  created () {
    this.init()
  },
  watch: {
    '$route' (to, from) {
      console.log(to, from);
      this.init();
    }
  },
  methods: {
    onEditorReady (editor) { // 准备编辑器

    },
    init () {
      this.id = this.$route.query.id
      this.workId = this.$route.query.workId
      if (this.id !== 0 && this.id !== undefined) {
        axios.get('http://127.0.0.1:8091/checkInfo/' + this.id).then(({data}) => {
          if (data && data.errCode === 0) {
            this.content = data.info
          } else {
            this.$message.error(data.errMsg)
          }
        }).catch()
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get('http://127.0.0.1:8091/checkInfo?id=' + this.id + '&&score=' + this.numberValidateForm.score).then(({data}) => {
            if (data && data.errCode === 0) {
              this.$router.push({name: 'detail', query: {workId: this.workId}})
            } else {
              this.$message.error(data.errMsg)
            }
          }).catch()
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
